<template>
  <div class="table-container">
    <div >这是管理员管理用户操作历史的界面</div>
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
    >
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column prop="gender" label="性别" width="80" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="date" label="日期" width="180" />
    </el-table>

    <div class="pagination-container">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :small="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 表格数据
const tableData = ref([])
// 加载状态
const loading = ref(false)
// 当前页码
const currentPage = ref(1)
// 每页条数
const pageSize = ref(10)
// 总条数
const total = ref(0)

// 模拟数据生成
const generateMockData = () => {
  const mockData = []
  const genders = ['男', '女']
  const addresses = [
    '北京市海淀区',
    '上海市浦东新区',
    '广州市天河区',
    '深圳市南山区',
    '成都市武侯区',
    '杭州市西湖区'
  ]

  for (let i = 1; i <= 100; i++) {
    mockData.push({
      id: i,
      name: `用户${i}`,
      age: Math.floor(Math.random() * 30) + 18,
      gender: genders[Math.floor(Math.random() * genders.length)],
      address: addresses[Math.floor(Math.random() * addresses.length)],
      date: new Date(
          2023,
          Math.floor(Math.random() * 12),
          Math.floor(Math.random() * 28) + 1
      ).toLocaleDateString()
    })
  }

  return mockData
}

// 获取表格数据
const fetchTableData = () => {
  loading.value = true

  // 模拟API请求延迟
  setTimeout(() => {
    const allData = generateMockData()
    total.value = allData.length

    // 分页处理
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    tableData.value = allData.slice(start, end)

    loading.value = false
  }, 500)
}

// 每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchTableData()
}

// 当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchTableData()
}

// 初始化加载数据
onMounted(() => {
  fetchTableData()
})
</script>

<style scoped>
.table-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>